<template>
  <div class="mod-demo-echarts">
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-select v-model="dataForm.measurePoint" placeholder="请选择测点">
          <el-option
            v-for="item in measurePointOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.switchId" placeholder="请选择光开关">
          <el-option
            v-for="item in switchOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
        <el-button @click="clear()">清空</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div id="positive" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="negative" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      chartLinePositive: null,
      chartLineNegative: null,
      dataForm: {
        switchId: null,
        measurePoint: null,
        direction: null
      },
      switchOptions: null,
      measurePointOptions: null,
      amplitudePositive: [],
      amplitudeNegatice: []
    };
  },
  mounted() {
    this.getAmplitude();
    this.getSwitchIds();
    this.getMeasurePoint();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLineNegative) {
      this.chartLineNegative.resize();
    }
    if (this.chartLinePositive) {
      this.chartLinePositive.resize();
    }
  },
  methods: {
    clear() {
      this.dataForm.measurePoint = null;
      this.dataForm.switchId = null;
    },

    getData() {
      this.getAmplitude();
    },

    // 获取光开关ID
    getSwitchIds() {
      this.$http({
        url: this.$http.adornUrl("/generator/amplitude/getSwitchIds"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.switchOptions = data.data;
        }
        this.dataListLoading = false;
      });
    },

    // 获取测点信息
    getMeasurePoint() {
      this.$http({
        url: this.$http.adornUrl("/generator/amplitude/getMeasurePoint"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.measurePointOptions = data.data;
        }
        this.dataListLoading = false;
      });
    },

    // 获取光谱数据
    getAmplitude() {
      this.$http({
        url: this.$http.adornUrl("/generator/amplitude/getAmplitude"),
        method: "post",
        params: this.$http.adornParams({
          switchId: this.dataForm.switchId,
          measurePoint: this.dataForm.measurePoint
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.amplitudePositive = data.amplitudePositive;
          this.amplitudeNegative = data.amplitudeNegative;
        }
        this.dataListLoading = false;
        this.initPositiveChartLine();
        this.initNegativeChartLine();
      });
    },

    // 折线图
    initPositiveChartLine() {
      var option = {
        title: {
          text: "正向光谱"
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 94.6,
            end: 100,
            handleSize: 8,
            left: "100%"
          },
          {
            type: "inside",
            start: 94.6,
            end: 100
          },
          {
            type: "slider",
            show: true,
            yAxisIndex: 0,
            filterMode: "empty",
            width: 12,
            start: 0,
            end: 100,
            height: "70%",
            handleSize: 8,
            showDataShadow: false,
            left: "100%"
          }
        ],
        xAxis: {
          type: "value",
          name: "波长(nm)",
          min: 1500,
          max: 1595.53,
          nameLocation: "middle",
          nameGap: 22
        },
        yAxis: {
          type: "value",
          name: "幅度",
          min: -10000,
          max: 70000
        },
        series: [
          {
            type: "line",
            data: this.amplitudePositive
          }
        ]
      };
      this.chartLinePositive = echarts.init(
        document.getElementById("positive")
      );
      this.chartLinePositive.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLinePositive.resize();
      });
    },
    initNegativeChartLine() {
      var option1 = {
        title: {
          text: "反向光谱"
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 94.6,
            end: 100,
            handleSize: 8,
            left: "100%"
          },
          {
            type: "inside",
            start: 94.6,
            end: 100
          },
          {
            type: "slider",
            show: true,
            yAxisIndex: 0,
            filterMode: "empty",
            width: 12,
            start: 0,
            end: 100,
            height: "70%",
            handleSize: 8,
            showDataShadow: false,
            left: "100%"
          }
        ],
        xAxis: {
          type: "value",
          name: "波长(nm)",
          min: 1500,
          max: 1595.53,
          nameLocation: "middle",
          nameGap: 22
        },
        yAxis: {
          type: "value",
          name: "幅度",
          min: -10000,
          max: 70000
        },
        series: [
          {
            type: "line",
            data: this.amplitudeNegative
          }
        ]
      };
      this.chartLineNegative = echarts.init(
        document.getElementById("negative")
      );
      this.chartLineNegative.setOption(option1);
      window.addEventListener("resize", () => {
        this.chartLineNegative.resize();
      });
    }
  }
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }

  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;

    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .chart-box {
    min-height: 400px;
  }
}
</style>
